<template>
  <view class="leader-dashboard-container">
    <!-- 团长信息头部 -->
    <view class="leader-header">
      <view class="leader-info">
        <image :src="leaderInfo.avatar || 'https://placehold.co/120x120/png?text=Avatar'" class="leader-avatar" mode="aspectFill"></image>
        <view class="leader-detail">
          <text class="leader-name">{{ leaderInfo.name || '团长' }}</text>
          <text class="store-name">{{ leaderInfo.store_name || '社区便利店' }}</text>
          <text class="service-radius">服务半径 {{ leaderInfo.service_radius || 0 }}m</text>
        </view>
      </view>
      
      <view class="leader-stats">
        <view class="stat-item">
          <text class="stat-value">{{ commissionStats.today_orders || 0 }}</text>
          <text class="stat-label">今日订单</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">¥{{ commissionStats.today_commission || '0.00' }}</text>
          <text class="stat-label">今日佣金</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ commissionStats.total_orders || 0 }}</text>
          <text class="stat-label">总订单数</text>
        </view>
      </view>
    </view>

    <!-- 快捷操作 -->
    <view class="quick-actions">
      <view class="action-item" @click="goToOrders">
        <uv-icon name="list" size="24" color="#ff6b00"></uv-icon>
        <text class="action-text">订单管理</text>
      </view>
      <view class="action-item" @click="goToCommission">
        <uv-icon name="integral" size="24" color="#ff6b00"></uv-icon>
        <text class="action-text">佣金管理</text>
      </view>
      <view class="action-item" @click="goToCommuvty">
        <uv-icon name="map" size="24" color="#ff6b00"></uv-icon>
        <text class="action-text">社区管理</text>
      </view>
      <view class="action-item" @click="goToSettings">
        <uv-icon name="setting" size="24" color="#ff6b00"></uv-icon>
        <text class="action-text">设置</text>
      </view>
    </view>

    <!-- 今日订单 -->
    <view class="today-orders">
      <view class="section-header">
        <text class="section-title">今日订单</text>
        <view class="more-btn" @click="goToOrders">
          <text>查看全部</text>
          <uv-icon name="arrow-right" size="12" color="#999"></uv-icon>
        </view>
      </view>
      
      <view class="order-list" v-if="todayOrders.length > 0">
        <view class="order-item" v-for="order in todayOrders" :key="order.id" @click="goToOrderDetail(order.id)">
          <view class="order-info">
            <text class="order-no">订单号：{{ order.order_no }}</text>
            <text class="order-status" :class="getStatusClass(order.status)">{{ order.status_text }}</text>
          </view>
          <view class="order-goods">
            <text class="goods-count">{{ order.goods_count }}件商品</text>
            <text class="order-amount">¥{{ order.total_amount }}</text>
          </view>
          <view class="order-time">{{ formatTime(order.created_at) }}</view>
        </view>
      </view>
      
      <view class="empty-orders" v-else>
        <image src="https://placehold.co/200x200/png?text=%E6%97%A0%E8%AE%A2%E5%8D%95" class="empty-image" mode="aspectFit"></image>
        <text class="empty-text">今日暂无订单</text>
      </view>
    </view>

    <!-- 佣金统计 -->
    <view class="commission-section">
      <view class="section-header">
        <text class="section-title">佣金统计</text>
        <view class="more-btn" @click="goToCommission">
          <text>查看详情</text>
          <uv-icon name="arrow-right" size="12" color="#999"></uv-icon>
        </view>
      </view>
      
      <view class="commission-cards">
        <view class="commission-card">
          <text class="card-label">本月佣金</text>
          <text class="card-value">¥{{ commissionStats.month_commission || '0.00' }}</text>
          <text class="card-desc">较上月 {{ getCommissionTrend() }}</text>
        </view>
        <view class="commission-card">
          <text class="card-label">累计佣金</text>
          <text class="card-value">¥{{ commissionStats.total_commission || '0.00' }}</text>
          <text class="card-desc">总收益</text>
        </view>
      </view>
    </view>

    <!-- 社区公告 -->
    <view class="commuvty-section">
      <view class="section-header">
        <text class="section-title">社区公告</text>
        <view class="more-btn" @click="goToCommuvty">
          <text>管理</text>
          <uv-icon name="arrow-right" size="12" color="#999"></uv-icon>
        </view>
      </view>
      
      <view class="announcement-list" v-if="announcements.length > 0">
        <view class="announcement-item" v-for="item in announcements" :key="item.id">
          <text class="announcement-title">{{ item.title }}</text>
          <text class="announcement-time">{{ formatTime(item.created_at) }}</text>
        </view>
      </view>
      
      <view class="empty-announcement" v-else>
        <text class="empty-text">暂无公告</text>
      </view>
    </view>

    <!-- 数据看板 -->
    <view class="data-dashboard">
      <view class="section-header">
        <text class="section-title">数据看板</text>
      </view>
      
      <view class="data-grid">
        <view class="data-item">
          <text class="data-label">服务用户</text>
          <text class="data-value">{{ dashboardData.service_users || 0 }}</text>
        </view>
        <view class="data-item">
          <text class="data-label">好评率</text>
          <text class="data-value">{{ dashboardData.rating || '0.0' }}%</text>
        </view>
        <view class="data-item">
          <text class="data-label">配送距离</text>
          <text class="data-value">{{ dashboardData.avg_distance || 0 }}km</text>
        </view>
        <view class="data-item">
          <text class="data-label">响应时间</text>
          <text class="data-value">{{ dashboardData.response_time || 0 }}分钟</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { leaderApi } from '../../api/index.js'

export default {
  data() {
    return {
      leaderInfo: {},
      commissionStats: {},
      todayOrders: [],
      announcements: [],
      dashboardData: {}
    }
  },
  
  onLoad() {
    this.initPage()
  },
  
  onShow() {
    this.loadDashboardData()
  },
  
  methods: {
    // 初始化页面
    async initPage() {
      this.loadLeaderInfo()
      this.loadCommissionStats()
      this.loadTodayOrders()
      this.loadAnnouncements()
      this.loadDashboardData()
    },
    
    // 加载团长信息
    async loadLeaderInfo() {
      try {
        const data = await leaderApi.getLeaderInfo()
        this.leaderInfo = data
      } catch (error) {
        console.error('加载团长信息失败', error)
      }
    },
    
    // 加载佣金统计
    async loadCommissionStats() {
      try {
        const data = await leaderApi.getCommissionStats()
        this.commissionStats = data
      } catch (error) {
        console.error('加载佣金统计失败', error)
      }
    },
    
    // 加载今日订单
    async loadTodayOrders() {
      try {
        const params = {
          date: new Date().toISOString().split('T')[0],
          page: 1,
          page_size: 5
        }
        const data = await leaderApi.getLeaderOrders(params)
        this.todayOrders = data.list || []
      } catch (error) {
        console.error('加载今日订单失败', error)
      }
    },
    
    // 加载社区公告
    async loadAnnouncements() {
      // 这里应该调用公告接口
      this.announcements = [
        {
          id: 1,
          title: '社区团购活动开始啦！',
          created_at: new Date().toISOString()
        },
        {
          id: 2,
          title: '新用户注册送优惠券',
          created_at: new Date(Date.now() - 86400000).toISOString()
        }
      ]
    },
    
    // 加载数据看板
    async loadDashboardData() {
      // 这里应该调用数据看板接口
      this.dashboardData = {
        service_users: 156,
        rating: 98.5,
        avg_distance: 1.2,
        response_time: 3
      }
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const statusMap = {
        'pending_accept': 'status-pending',
        'accepted': 'status-accepted',
        'delivering': 'status-delivering',
        'completed': 'status-completed'
      }
      return statusMap[status] || 'status-default'
    },
    
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      const now = new Date()
      const diff = now - date
      
      if (diff < 60000) return '刚刚'
      if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'
      if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'
      
      return date.toLocaleDateString()
    },
    
    // 获取佣金趋势
    getCommissionTrend() {
      // 这里应该根据实际数据计算趋势
      return '+12.5%'
    },
    
    // 跳转订单管理
    goToOrders() {
      this.$navigateTo('/pages/leader/orders')
    },
    
    // 跳转佣金管理
    goToCommission() {
      this.$navigateTo('/pages/leader/commission')
    },
    
    // 跳转社区管理
    goToCommuvty() {
      this.$navigateTo('/pages/leader/commuvty')
    },
    
    // 跳转设置
    goToSettings() {
      this.$navigateTo('/pages/leader/settings')
    },
    
    // 跳转订单详情
    goToOrderDetail(orderId) {
      this.$navigateTo(`/pages/order/detail?id=${orderId}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.leader-dashboard-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.leader-header {
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  padding: 40rpx 30rpx;
  color: #fff;
  
  .leader-info {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    
    .leader-avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 30rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
    }
    
    .leader-detail {
      flex: 1;
      
      .leader-name {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .store-name {
        font-size: 28rpx;
        opacity: 0.8;
        margin-bottom: 5rpx;
      }
      
      .service-radius {
        font-size: 24rpx;
        opacity: 0.8;
      }
    }
  }
  
  .leader-stats {
    display: flex;
    justify-content: space-around;
    
    .stat-item {
      text-align: center;
      
      .stat-value {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .stat-label {
        font-size: 24rpx;
        opacity: 0.8;
      }
    }
  }
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  margin: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  
  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .action-text {
      font-size: 24rpx;
      color: #333;
      margin-top: 10rpx;
    }
  }
}

.today-orders {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
    
    .more-btn {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 24rpx;
    }
  }
  
  .order-list {
    .order-item {
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .order-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        
        .order-no {
          font-size: 26rpx;
          color: #333;
        }
        
        .order-status {
          font-size: 24rpx;
          padding: 4rpx 12rpx;
          border-radius: 10rpx;
          
          &.status-pending {
            background-color: #fff3cd;
            color: #856404;
          }
          
          &.status-accepted {
            background-color: #d1ecf1;
            color: #0c5460;
          }
          
          &.status-delivering {
            background-color: #d4edda;
            color: #155724;
          }
          
          &.status-completed {
            background-color: #c3e6cb;
            color: #155724;
          }
        }
      }
      
      .order-goods {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        
        .goods-count {
          font-size: 24rpx;
          color: #666;
        }
        
        .order-amount {
          font-size: 28rpx;
          color: #ff4444;
          font-weight: bold;
        }
      }
      
      .order-time {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
  
  .empty-orders {
    text-align: center;
    padding: 60rpx 0;
    
    .empty-image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 20rpx;
    }
    
    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }
}

.commission-section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
    
    .more-btn {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 24rpx;
    }
  }
  
  .commission-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    
    .commission-card {
      background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%);
      color: #fff;
      padding: 30rpx;
      border-radius: 15rpx;
      text-align: center;
      
      .card-label {
        font-size: 24rpx;
        opacity: 0.8;
        margin-bottom: 10rpx;
      }
      
      .card-value {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .card-desc {
        font-size: 22rpx;
        opacity: 0.8;
      }
    }
  }
}

.commuvty-section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
    
    .more-btn {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 24rpx;
    }
  }
  
  .announcement-list {
    .announcement-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .announcement-title {
        font-size: 28rpx;
        color: #333;
      }
      
      .announcement-time {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  .empty-announcement {
    text-align: center;
    padding: 60rpx 0;
    
    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }
}

.data-dashboard {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  
  .section-header {
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
  }
  
  .data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    
    .data-item {
      background-color: #f8f9fa;
      padding: 30rpx;
      border-radius: 15rpx;
      text-align: center;
      
      .data-label {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 10rpx;
      }
      
      .data-value {
        display: block;
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }
    }
  }
}
</style> 